import React, { useState, useEffect } from 'react'
import { fetchCates, removeCate, updateCate } from '@/api/cate'
import type { Cate } from './types';
import { Table, InputNumber, Switch, Image, Button, Modal, message  } from 'antd';

import CateAdd from './components/CateAdd';
import CateUpdate from './components/CateUpdate';
import SearchBar from '@/components/SearchBar';

export default function CateLists() {
  // 获取分类列表
  const [cates, setCates] = useState<Cate[]>([]);
  let searchParams: {keyWords?: string,start?:string,end?: string} = {
    keyWords: '',
    start: '',
    end: ''
  }
  const getCates = () => {
    fetchCates(searchParams).then(res => {
      if (res.data.code === 200) {
        setCates(res.data.data)
      }
    })
  }
  useEffect(() => {
    getCates();
  }, [])

  const columns = [
    {
      title: '分类名',
      dataIndex: 'cateName',
      key: 'cateName'
    },
    {
      title: '排序',
      dataIndex: 'sort',
      render: (sort: number, row: any) => (
        <InputNumber defaultValue={sort} onChange={(value) => {
          if (value) {
            changeCateSort(row.id, value as number)
          }
        }}/>
      ),
      key: 'sort',
    },
    {
      title: '是否隐藏',
      dataIndex: 'onoff',
      key: 'onoff',
      render: (onoff: number, row: any) => (
        <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={onoff===1} 
        onChange={(checked) => {
          changeCateOff(row.id, checked?1:0)
          
        }}/>
      )
    },
    {
      title: '分类图标',
      dataIndex: 'cateIcon',
      key: 'cateIcon',
      render: (cateIcon: string) => (
        <Image src={cateIcon} width={50}/>
      )
    },
    {
      title: '分类图标',
      key: 'action',
      render: (row: Cate) => (
        <>
          <Button onClick={
            () => {
              setCateUpdateShow(true);
              setCateId(row.id)
            }
          } type='primary' style={{background: '#3dc567'}}>编辑</Button>
          <Button type='primary' onClick={
            () => {
              delCate(row.id)
            }
          } danger>删除</Button>
        </>
      )
    }
  ];
  // 删除商品分类
  const delCate = (id: number) => {
    Modal.confirm({
      title: '删除分类',
      content: '此操作会彻底删除该分类,确定继续吗?',
      onOk() {
         removeCate(id).then(res => {
          if (res.data.code === 200) {
            message.success(res.data.msg, 2, () => {
              getCates()
            })
          } else {
            message.error(res.data.msg)
          }
          
         })
      },
    })
  }
  const onSearch = (params:any) => {
    searchParams = params
    getCates()
  }

  // 新增商品分类弹窗处理
  const [cateAddShow, setCateAddShow] = useState(false)
  // 修改商品分类弹窗处理
  const [cateId, setCateId] = useState(-1);
  const [cateUpdateShow, setCateUpdateShow] = useState(false)

  // 行内修改分类排序
  const changeCateSort = (id: number, sort: number) => {
    updateCate({
      id,
      sort
    }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          getCates()
        })
      }
    })
    
  }
  // 行内修改商品 显示隐藏
  const changeCateOff = (id: number, onoff: number) => {
    updateCate({
      id,
      onoff
    }).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          getCates()
        })
      }
    })
  }
  return (
    <>
      {/* 搜索 */}
      <SearchBar onSearch={onSearch}/>
      {/* /搜索 */}
      <Button onClick={
        () => {
          setCateAddShow(true)
        }
      } style={{margin: 10,background: '#dc6656'}} type='primary'>新增商品分类</Button>
      <Table  dataSource={cates} columns={columns} rowKey="id" pagination={false}/>
      {/* 新增商品分类弹窗 */}
      <Modal title="新增商品分类" open={cateAddShow} footer={null} onCancel={() => {
        setCateAddShow(false)
      }}>
        <CateAdd cates={cates}/>
      </Modal>
      {/* /新增商品分类弹窗 */}

      {/* 修改商品分类弹窗 */}
      <Modal title="修改商品分类" open={cateUpdateShow} footer={null} onCancel={() => {
        setCateUpdateShow(false)
      }}>
        <CateUpdate cates={cates} cateId={cateId}/>
      </Modal>
      {/* /修改商品分类弹窗 */}
    </>
  )
}


